<template>
  <a-avatar class="cursor-pointer" @click="onOpenDrawer" :size="36">
    <template #icon>
      <img v-if="userInfo.avatar" :src="`/api/image/72/72/${userInfo.avatar}`" alt="" />
      <UserOutlined v-else />
    </template>
  </a-avatar>

  <a-drawer
    :root-style="{ marginLeft: '64px', zIndex: 999 }"
    :mask-style="{ background: 'transparent' }"
    placement="left"
    :width="300"
    :body-style="{ padding: 0 }"
    :closable="false"
    class="ff-drawer"
    v-model:open="drawer"
  >
    <template #title>
      <a-space>
        <span>{{ userInfo.name }}</span>
        <a-tag color="success" v-for="role in userInfo.roles">{{ role.role.name }}</a-tag>
      </a-space>
    </template>

    <a-list size="small">
      <a-list-item class="cursor-pointer auto-bg-hover" @click="onSettings">
        <div class="flex items-center">
          <i class="i-base:user mr-10 text-16"></i>
          <span>个人设置</span>
        </div>
      </a-list-item>
      <a-list-item class="cursor-pointer auto-bg-hover" @click="onLogout">
        <div class="flex items-center">
          <i class="i-base:log-out mr-10 text-16"></i>
          <span>退出登录</span>
        </div>
      </a-list-item>
    </a-list>
  </a-drawer>
</template>
<script setup lang="ts">
import { UserOutlined } from '@ant-design/icons-vue'
import { useAuthStore, useUserStore } from '@/store'
import { Modal } from 'ant-design-vue'
import { message as Message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const drawer = ref(false)
const { userInfo } = useUserStore()
const onOpenDrawer = () => {
  drawer.value = !drawer.value
}

const onLogout = () => {
  onOpenDrawer()
  Modal.confirm({
    title: '提示',
    type: 'info',
    content: '确定退出登录？',
    onOk() {
      useAuthStore().logout()
      Message.success('已退出登录').then(() => {})
    },
  })
}

const onSettings = () => {
  router.push('/settings')
  onOpenDrawer()
}
</script>
